import { CommonForm } from '@/pages/OrderModule/common/components/CommonForm';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import IconFont from '@/components/IconFont';
import Typography from '@/pages/OrderModule/common/components/Typography';
import { Form, Row, Col, Space, Button } from 'antd';
import React, { useState } from 'react';
import TagField from '../TagField';
import SetTag from '@/components/SelectTag/SetTag.jsx';
import CommonLoading from '@/components/CommonLoading/index.jsx';
import {queryTagList} from '@/pages/OrderModule/orderList/services.js';

/**
 * @description 选择标签
 * @param {function} props.defaultValue 默认选择数据
 * @param {function} props.onChange 数据回调函数
 */
const SelectTagModal = React.memo((props) => {
  const { onChange, children, modalProps={}, defaultValue, ...arg } = props;
  const [form] = Form.useForm();
  const [show, toggleShow] = useState(false);
  const [tagList, setTagList] = useState([]);
  const [tagVisible, setTagVisible] = useState(false);
    const [loading, setLoading] = useState(false);
    const getTagList = async () => {
        setLoading(true);
        const { success, data } = await queryTagList();
        setLoading(false);
        if (success) {
            setTagList(data);
        }
    };
    //维护自定义标签弹框
    const SetTagProps = {
        handleCancel() {
            setTagVisible(false);
            getTagList();
        }
    };
  function handleSubmit () {
    const optionsMap = tagList.reduce((acc, cur) => {
      acc[cur.id] = {
        labelId: cur.id,
        labelName: cur.name
      };
      return acc;
    }, {});

    const values = form.getFieldValue('labelId');
    const currentList = (values || []).map((id) => optionsMap[id]);
    onChange && onChange(currentList);
    toggleShow(false);
  }
  return (
    <div {...arg}>
      <span onClick={() => toggleShow(true)}>{children}</span>
      <CommonModal
        title={{ title: modalProps.title || '选择标签' }}
        {...modalProps}
        open={show}
        width={840}
        onCancel={() => toggleShow(false)}
				footer={
					<Row justify="space-between">
						<Col>
							<Button style={{padding: 0}} type="link" onClick={() => setTagVisible(true)}>
								<Typography color="#0068FF">
									<IconFont type="icona-lujing1" />
								</Typography>
								&nbsp;&nbsp;<Typography color="#333">维护自定义标签</Typography>
							</Button>
						</Col>
						<Col>
							<Space>
								<Button size="middle" onClick={() => toggleShow(false)}>
									取消
								</Button>
								<Button size="middle" type="primary" onClick={handleSubmit}>
									确定
								</Button>
							</Space>
						</Col>
					</Row>
				}
      >
        <CommonForm
          formProps={{
            form,
            initialValues: {
              labelId: defaultValue || []
            }
          }}
          columns={[
            {
              block: <TagField filterable fieldKey="labelId" setTagList={(data) => {
                setTagList(data)
              }} />,
            },
          ]}
        ></CommonForm>
          <CommonLoading loading={loading} />
          {tagVisible && <SetTag {...SetTagProps} />}
      </CommonModal>
    </div>
  );
});
export default SelectTagModal;
